import { FC, useState } from "react"
import Taro from '@tarojs/taro'
import avatar from '../../resource/avatar.png'
import great from '../../resource/great.png'
import good from '../../resource/good.png'
import bad from '../../resource/bad.png'
import style from './style.less'

const Evaluate: FC = () => {
  const [select, setSelect] = useState(0)

  const submit = () => {
    if (select === 0) {
      Taro.showToast({
        title: '请选择满意度',
        icon: 'none',
        duration: 1500
      })
      return
    }
    Taro.redirectTo({ url: '/packageC/evaSuccess/index' })
  }

  return (
    <div className={style.root}>
      <div className="owner">
        <img src={avatar} alt="" />
        <div>李师傅<i>尊享会员</i></div>
        <div>交易117 | 好评率99%</div>
      </div>
      <div className="evaluate">
        <div className="eva-title">
          <div>您对司机满意吗？</div>
          <div>已对司机匿名</div>
        </div>
        <div className="eva-rate">
          <div className={select === 1 ? "eva-item selected" : "eva-item"} onClick={() => { setSelect(1) }}>
            <img src={bad} alt="" />
            <div>不满意</div>
          </div>
          <div className={select === 2 ? "eva-item selected" : "eva-item"} onClick={() => { setSelect(2) }}>
            <img src={good} alt="" />
            <div>满意</div>
          </div>
          <div className={select === 3 ? "eva-item selected" : "eva-item"} onClick={() => { setSelect(3) }}>
            <img src={great} alt="" />
            <div>很满意</div>
          </div>
        </div>
        <textarea placeholder="您对司机或者平台有什么建议吗？" />
      </div>
      <div className="submit" onClick={submit}>提交评价</div>
    </div>
  )
}

export default Evaluate